<template>
	<view class="center">
		<view class="avatar">
			<uni-id-pages-avatar class="avatar__display" width="260rpx" height="260rpx" />
			<uv-text class="uni-pt-5" type="info" align="center" text="*点击更换头像" />
		</view>
		<view class="detail">
			<uv-cell-group :border="false">
				<uv-cell v-for="(item, itemIndex) in detailItems" :key="itemIndex"
					:title="item.title" :value="item.value" 
					isLink @click.capture="item.onClick"
					:border="itemIndex != detailItems.length - 1">
				</uv-cell>
			</uv-cell-group>
		</view>
	</view>
	<view class="colored-background"></view>
	<uv-datetime-picker ref="birthdayPicker" mode="date" confirmColor="#e09ab5"
		:value="userInfo.birthday" 
		@confirm="(rs: any) => uploadInfo({ birthday: rs.value })"
		:minDate="0" :max-date="Date.now()">
	</uv-datetime-picker>
	<uv-picker ref="genderPicker" confirmColor="#e09ab5"
		:columns="[genderList]"
		@confirm="(rs: any) => uploadInfo({ gender: rs.indexs[0] })">
	</uv-picker>
</template>

<script lang="ts" setup>
	import { computed, ref, ComputedRef } from 'vue'
	import { store, mutations } from '@/uni_modules/uni-id-pages/common/store.js'
	const userInfo = computed(() => {
		console.log(store.userInfo)
		return store.userInfo
	})
	
	const birthdayPicker = ref(null)
	const genderPicker = ref(null)
	const genderList = ref(['保密', '男', '女'])
	const formatTimestamp = (timeStamp?: number) => {
		if (!timeStamp) return '未设置'
		const date = new Date(timeStamp)
		return date.toLocaleDateString().replaceAll('/', '-')
	}
	const formatDescription = (description: string) => {
		if (!description) return '未设置'
		return description.length > 10 ? description.slice(0, 10) + '...' : description
	}
	
	interface DetailItem {
		title: string,
		value: string | ComputedRef<string>,
		onClick?: () => void
	}
	const detailItems = ref<DetailItem[]>([
		{
			title: '昵称',
			value: computed(() => userInfo.value.nickname),
			onClick: () => {
				uni.navigateTo({
					url: '/pages/user-center/user-info/change-nickname',
					animationType: 'slide-in-right',
					animationDuration: 200,
				})
			},
		},
		{
			title: '性别',
			value: computed(() => genderList.value[userInfo.value.gender] || '保密'),
			onClick: () => {
				if (userInfo.value.gender) {
					genderPicker.value.setIndexs([userInfo.value.gender])
				}
				genderPicker.value.open()
			}
		},
		{
			title: '生日',
			value: computed(() => formatTimestamp(userInfo.value.birthday)),
			onClick: () => {
				birthdayPicker.value.open()
			}
		},
		{
			title: '个性签名',
			value: computed(() => formatDescription(userInfo.value.description)),
			onClick: () => {
				uni.navigateTo({
					url: '/pages/user-center/user-info/change-description',
					animationType: 'slide-in-right',
					animationDuration: 200,
				})
			},
		},
	])

	const uploadInfo = async (data: any) => {
		uni.showLoading({
			title: '更新中'
		})
		console.log("更新信息: " + JSON.stringify(data));
		await mutations.updateUserInfo(data)
		uni.hideLoading()
	}
</script>

<style lang="scss" scoped>
	.center {
		flex: 1;
		flex-direction: column;
	}
	.avatar {
		padding-top: 100rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		&__display {
			overflow: hidden;
			width: 260rpx;
			height: 260rpx;
			border-radius: 100%;
		}
	}
	.detail {
		margin: 50rpx 50rpx 0 50rpx;
		padding: 20rpx;
		background-color: $uni-white;
		border-radius: 20rpx;
	}
</style>
